<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <!--标题部分-->
    <div>
        <h2>系统公告客户端设计及实现(Bootstrap+jquery)</h2>
    </div>
    <!--内容部分-->
    <div>
        <div id="noticeListContainer"><!--内容列表区-->
            <form id="queryForm" style="display: inline">
                <input type="text" name="title" placeholder="请输入标题">
                <input type="button" class="btn btn-primary btn-sm" value="查询" onclick="doQueryNotices()">
            </form>
            <button onclick="doDisplay()" class="btn btn-primary btn-sm">添加</button>
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="6">数据正在加载中.....</td>
                </tr>
                </tbody>
            </table>
            <!--分页DIV-->
            <div class="pagination">
                <button class="pre">上一页</button>
                <button class="percent">1/1</button>
                <button class="next">下一页</button>
                <form id="pageForm" style="display: inline">
                    <input type="text" name="pageCurrent">
                    <input type="button" value="跳转" class="jump">
                </form>
            </div>
        </div>
        <div id="noticeEditContainer" style="display: block">
            <form id="noticeEditForm">
                <input type="hidden" id="id">
                <div class="form-group">
                    <label for="typeId">类型:</label>
                    <select class="form-control" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="titleId">标题:</label>
                    <input type="text" class="form-control" id="titleId" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" rows="3" id="contentId">
                   </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1"> 关闭
                    </label>
                </div>
                <button type="button" class="btn btn-primary submit" onclick="doSaveOrUpdate()">Submit</button>
                <button type="button" class="btn btn-primary cancel">Cancel</button>
            </form>
        </div>
    </div>
    <br/>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
    //jquery中定义的页面加载函数(页面加载完成执行)
    $(function () {
        //debugger
        doGetNotices();
        //分页事件注册及处理
        //在类选择器为pagination的容器对象注册click事件，
        // 当点击容器内部的pre,next,jump类选择器对应的元素时执行doJumpToPage函数
        $(".pagination").on("click", ".pre,.next,.jump", doJumpToPage);
    });

    function doFindById(id) {
        //1.基于id查找通告信息
        let url = `http://localhost/notice/${id}`;
        $.ajax({
            url: url, success(result) {
                if (result.state == 1) {
                    //2.初始化表单数据
                    doInitEditForm(result);
                } else {
                    alert("可能记录已经被删除");
                }
            }
        })
    }

    //初始化表单数据
    function doInitEditForm(result) {//result.data->Notice
        $("#id").val(result.data.id);
        $(`#noticeEditForm select>option[value=${result.data.type}]`).prop("selected", true)
        $("#titleId").val(result.data.title);
        $("#contentId").val(result.data.content);
        $(`#noticeEditForm input[value=${result.data.status}]:radio`).prop("checked", true)
    }

    //添加或更新通告信息
    function doSaveOrUpdate() {
        //1.获取请求参数
        let params = {
            id: $("#id").val(),
            type: $("#typeId").val(),
            title: $("#titleId").val(),
            content: $("#contentId").val(),
            status: $("#noticeEditForm input:radio:checked").val()
        }
        //2.定义请求url
        let url = "http://localhost/notice/";
        //3.发送异步请求
        $.ajax({
            method: params.id ? "put" : "post",
            url: url,
            data: JSON.stringify(params),//将js对象转换为json字符串
            contentType: "application/json",//向服务端传递的数据类型
            success(result) {
                if (result.state == 1) {
                    alert(result.message);
                    doGetNotices();
                    doRestForm();//重置表单数据
                } else {
                    alert(result.message);
                }
            }
        });
    }

    function doRestForm() {//重置表单数据
        $("#id").val("");
        $(`#noticeEditForm select>option[value=1]`).prop("selected", true)
        $("#titleId").val("");
        $("#contentId").val("");
        $(`#noticeEditForm input[value=0]:radio`).prop("checked", true)
    }

    //设置div容器的隐藏或显示
    function doDisplay() {
        //让编辑区显示
        //$("#noticeEditContainer").css("display","block");
        // 让列表区隐藏
        //$("#noticeListContainer").css("display","none");
    }

    //点击查询按钮时基于条件查询通告信息
    function doQueryNotices() {
        //1.初始化当前页页码
        localStorage.setItem("pageCurrent", 1);
        //2.基于条件进行查询
        doGetNotices();
    }

    //基于分页按钮点击事件，进行分页查询
    function doJumpToPage() {
        //1.获取被点击对象的class属性值.
        //$(this)表示被点击的对象
        //prop(属性名[,属性值])为jquery中用于操作属性值的一函数
        let cls = $(this).prop("class");
        //2.基于被点击对象的class属性值修改当前页码值
        //2.1获取当前页码值，总页数
        let pageCurrent = parseInt(localStorage.getItem("pageCurrent"));//当前页码值
        let pageCount = parseInt(localStorage.getItem("pageCount"));//总页数
        //2.2修改当前页码值
        if (cls == "pre" && pageCurrent > 1) {
            pageCurrent--;
        } else if (cls == "next" && pageCurrent < pageCount) {
            pageCurrent++;
        } else if (cls == "jump") {
            //获取form表单中元素为input，名字为pageCurrent的值
            let pageStr = $("#pageForm input[name=pageCurrent]").val();
            let pageC = parseInt(pageStr);
            if (pageC < 1 || pageC > pageCount) {
                alert("页码值不合法");
                $("pageForm input[name=pageCurrent]").val("");//回到初始状态
                return;
            }
            pageCurrent = pageC;
            $("pageForm input[name=pageCurrent]").val("");//回到初始状态
        } else {
            //假如已经是第一页了，你还点上一页，则什么也不做
            //假如已经是最后一页了，你还点下一页，则什么不做
            return;
        }
        console.log("pageCurrent", pageCurrent)
        //将修改了以后的当前页码值，存储起来
        localStorage.setItem("pageCurrent", pageCurrent);
        //3.基于新的页码值重新执行查询
        doGetNotices();
    }

    //条件查询公告通告信息
    function doGetNotices() {
        //1.定义请求参数
        let pageCurrent = localStorage.getItem("pageCurrent");
        if (pageCurrent == '' || pageCurrent == "NaN") pageCurrent = 1;
        // let params="pageCurrent="+pageCurrent;
        //let params=`pageCurrent=${pageCurrent}`;
        let params = {pageCurrent: pageCurrent};
        //let params={pageCurrent}
        let title = $("#queryForm input[name=title]").val();
        params.title = title;
        //定义请求url
        let url = "http://localhost/notice/";
        //基于jquery中的ajax函数向服务端发起异步请求
        //$代表jquery对象
        $.ajax({
            url: url,
            data: params,
            success(result) {//服务端没有抛出异常到客户端时执行此函数，result为服务端响应的结果
                // console.log(result);//JsonResult
                doHandleQueryResponseResult(result);
            }
        })
    }

    //处理查询响应结果
    function doHandleQueryResponseResult(result) {
        if (result.state == 1) {
            doHandleQueryOk(result);
        } else {
            doHandleQueryError();
        }
    }

    function doHandleQueryError() {
        debugger
        //1.更新tbody内容
        let tBody = $("table>tbody");
        let len = $("table>thead>tr>th").length;
        let tr = `<tr><td colspan="${len}">没有找到对应记录</td></tr>`
        tBody.html(tr);
        //================
        //2.刷新页码值
        $(".percent").html("0/0");
    }

    //处理正确的条件查询结果
    function doHandleQueryOk(result) {
        //设置tbody中的内容
        let records = result.data.list;
        doSetTableBodyRows(records);
        //设置分页信息(初始化分页数据)
        if (records.length > 0)
            doSetPagination(result);
    }

    //初始化分页信息
    function doSetPagination(result) {
        //初始化页面上的分页数据
        let pageCurrent = result.data.pageNum;//当前页码值
        let pageCount = result.data.pages;//总页数
        $(".percent").html(pageCurrent + "/" + pageCount);
        //将当前页码值存储到浏览器的localStorage对象中，便于其它方法后续应用
        localStorage.setItem("pageCurrent", pageCurrent);
        localStorage.setItem("pageCount", pageCount);
    }

    //设置tbody中的公告或通知信息
    function doSetTableBodyRows(records) {//通告信息
        //1.获取tbody对象，并清空原有内容
        let tBody = $("tbody");//获取tbody对象
        tBody.empty();//清空tbody内容
        //2.迭代records中的内容，并追加到tbody中
        if (records.length == 0) {
            doHandleQueryError();
            return;
        }
        //forEach为js中的原生数组函数，item为数组中的一个元素，i为元素下表
        records.forEach((item, i) => tBody.append(doCreateRow(item, i)));

    }

    //创建tr对象并填写每一列的内容
    function doCreateRow(item, i) {
        return `<tr><td>${i + 1}</td>
                    <td>${item.title}</td>
                    <td>${item.type == '1' ? "通知" : "公告"}</td>
                    <td>${item.status == '0' ? "正常" : "关闭"}</td>
                    <td>${item.createdTime}</td>
                    <td>
                    <button class="btn btn-danger btn-xs" onclick="doDeleteById(${item.id})">delete</button>
                    <button class="btn btn-warning btn-xs" onclick="doFindById(${item.id})">update</button>
                    </td>
                </tr>`;
    }

    function doDeleteById(id) {//http://localhost/notice/id
        //1.定义请求参数
        //2.定义请求url
        let url = `http://localhost/notice/${id}`;
        //3.发送异步请求
        $.ajax({
            method: "delete",
            url: url,
            success(result) {
                doHandleDeleteResponseResult(result);
            }
        });
    }

    function doHandleDeleteResponseResult(result) {
        if (result.state == 1) {//ok
            doHandleDeleteOk(result.message);
        } else {
            //doHandleDeleteError();
            alert(result.message);
        }
    }

    function doHandleDeleteOk(msg) {
        //1.给出提示信息
        alert(msg);
        //2.设置当前页码值(假如是最后一页，没有数据了应该返回上一页)
        let rows = $("table>tbody>tr").length;
        let pageCurrent = parseInt(localStorage.getItem("pageCurrent"));
        let pageCount = parseInt(localStorage.getItem("pageCount"));
        if (pageCurrent > 1 && pageCurrent == pageCount && rows == 1) {
            pageCurrent--;
            localStorage.setItem("pageCurrent", pageCurrent);
        }
        //3.刷新
        doGetNotices();
    }

</script>
</body>
</html>